import React from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
    SafeAreaView,
    Dimensions,
    Animated,
    StatusBar,
} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

/**
 * 侧边栏菜单组件 - 可复用的全屏滑动菜单
 * 
 * 参数说明:
 * @param {ReactNode} children - 主内容区域显示的内容
 * @param {Array} menuItems - 菜单项数组，格式: [{id, title, icon}]
 * @param {Function} onMenuItemPress - 菜单项点击回调函数
 * @param {Boolean} isOpen - 侧边栏是否打开的状态
 * @param {Function} toggleMenu - 切换侧边栏显示/隐藏的函数
 * @param {Object} customStyles - 自定义样式对象，覆盖默认样式
 * @param {String} closeButtonIcon - 关闭按钮图标名称(FontAwesome)
 * @param {String} sidebarBgColor - 侧边栏背景色
 * @param {String} menuItemActiveBgColor - 选中菜单项背景色
 * @param {String} menuItemActiveTextColor - 选中菜单项文字颜色
 * @param {String} menuItemActiveIconColor - 选中菜单项图标颜色
 * @param {String} direction - 侧边栏展开方向: 'left' 或 'right'
 * 
 * 复用注意事项:
 * 1. 需要安装依赖: react-native-vector-icons
 * 2. 确保已配置Font Awesome字体: react-native link react-native-vector-icons
 * 3. menuItems数组中每个项必须包含唯一的id和title属性
 * 4. 如需自定义样式，可通过customStyles覆盖默认样式
 * 5. 如需自定义动画，可修改Animated.timing相关参数
 */
const { width, height } = Dimensions.get('window');

// 定义默认样式
const defaultStyles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    mainContent: {
        flex: 1,
        paddingTop: StatusBar.currentHeight || 0,
    },
    // 全屏侧边栏配置
    sidebar: {
        position: 'absolute',
        top: 0,
        right: 0, // 从右侧滑入
        width: width * 0.8, // 侧边栏宽度为屏幕的80%
        height: height,
        backgroundColor: '#fff',
        shadowColor: '#000',
        shadowOffset: { width: -2, height: 0 }, // 阴影在左侧
        shadowOpacity: 0.2,
        shadowRadius: 4,
        elevation: 5,
        zIndex: 2,
        borderTopLeftRadius: 16,
        borderBottomLeftRadius: 16,
    },
    closeButtonContainer: {
        alignItems: 'flex-end',
        padding: 15,
    },
    closeButton: {
        width: 35,
        height: 35,
        borderRadius: 17.5,
        backgroundColor: '#f5f5f5',
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 2,
    },
    sidebarContent: {
        paddingHorizontal: 10,
        paddingTop: 5,
    },
    menuItem: {
        padding: 18,
        margin: 5,
        borderRadius: 10,
        flexDirection: 'row',
        alignItems: 'center',
        transitionDuration: 200,
    },
    menuItemText: {
        fontSize: 17,
        marginLeft: 15,
        color: '#333',
    },
    menuItemIcon: {
        fontSize: 20,
        color: '#555',
    },
    overlay: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: 'rgba(0, 0, 0, 0.3)',
        zIndex: 1,
        justifyContent: 'flex-end',
    },
});

const SidebarMenu = ({
    children,
    menuItems,
    onMenuItemPress,
    isOpen,
    toggleMenu,
    customStyles = {},
    closeButtonIcon = 'times',
    sidebarBgColor = '#fff',
    menuItemActiveBgColor = '#e8f4ff',
    menuItemActiveTextColor = '#165DFF',
    menuItemActiveIconColor = '#165DFF',
    direction = 'right', // 默认从右侧展开
}) => {
    const animation = new Animated.Value(isOpen ? 1 : 0);

    // 关闭菜单
    const closeMenu = () => {
        toggleMenu(false);
    };

    // 处理菜单项点击
    const handleMenuItemPress = (item) => {
        onMenuItemPress(item);
        closeMenu();
    };

    // 侧边栏从右侧滑入的动画
    const translateX = animation.interpolate({
        inputRange: [0, 1],
        outputRange: [width, 0],
    });

    return (
        <SafeAreaView style={[defaultStyles.container, customStyles.container]}>
            {/* 主内容区域 - 不再渲染菜单按钮 */}
            <View style={[defaultStyles.mainContent, customStyles.mainContent]}>
                {children}
            </View>

            {/* 遮罩层 - 点击可关闭菜单 */}
            {isOpen && (
                <TouchableOpacity
                    activeOpacity={1}
                    style={[defaultStyles.overlay, customStyles.overlay]}
                    onPress={closeMenu}
                />
            )}

            {/* 侧边菜单 */}
            <Animated.View
                style={[
                    defaultStyles.sidebar,
                    { transform: [{ translateX }], backgroundColor: sidebarBgColor },
                    customStyles.sidebar
                ]}
            >
                {/* 关闭按钮 */}
                <View style={defaultStyles.closeButtonContainer}>
                    <TouchableOpacity onPress={closeMenu} style={defaultStyles.closeButton}>
                        <FontAwesome
                            name={closeButtonIcon}
                            size={18}
                            color="#555"
                        />
                    </TouchableOpacity>
                </View>

                {/* 菜单内容区域 */}
                <View style={[defaultStyles.sidebarContent, customStyles.sidebarContent]}>
                    {menuItems.map((item) => {
                        return (
                            <TouchableOpacity
                                key={item.id}
                                onPress={() => handleMenuItemPress(item)}
                                style={[defaultStyles.menuItem]}
                            >
                                <FontAwesome
                                    name={item.icon || 'circle-o'}
                                    size={20}
                                    color="#555"
                                />
                                <Text style={defaultStyles.menuItemText}>
                                    {item.title}
                                </Text>
                            </TouchableOpacity>
                        );
                    })}
                </View>
            </Animated.View>
        </SafeAreaView>
    );
};

export default SidebarMenu;